<template>
  <div class="ip-order-income">
    <div style="display:flex;align-items:center;">
      <SectionTitle title="分成信息"/>
    </div>
    <div class="top-container">
      <dataDisplay
        ref="dataDisplayRef"
        :data-list="dataList"
      />
    </div>
    <div v-loading="loading" class="income-table">
      <el-table
        v-if="incomeData.items.length > 0"
        ref="allOrderTableRef"
        :data="handleData(incomeData.items)"
        :cell-class-name="tableCellClassName"
        border
        element-loading-text="加载中..."
        empty-text="暂无数据"
        class="fb-table"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row>
        <el-table-column align="left" label="分期月份" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.month || scope.row.month === 0">{{ scope.row.month }}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="当期总额(元)" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.totalSharingPrice || scope.row.totalSharingPrice === 0">{{ scope.row.totalSharingPrice | moneyFilter }}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="收入项" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.ipName" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="收入细项" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.incomeDetail" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="含税金额(元)" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.taxAmount | moneyFilter" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="不含税收入(元)" width="110">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.notTaxAmount | moneyFilter" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="税率" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.taxRate + '%'" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="税额(元)" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.taxNum" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="作者分成（IP授权、衍生品收入）(元)" width="240">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.authorSharingPrice | moneyFilter" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="分成比例" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.ipList && scope.row.ipList.length > 0" class="column-list">
              <div v-for="(item,index) in scope.row.ipList" :key="index" :class="{'border': index < scope.row.ipList.length-1}" class="column-item">
                <ToolTip :content="item.sharingPriceRate + '%'" />
              </div>
            </div>
            <div v-else class="plr10">--</div>
          </template>
        </el-table-column>
      </el-table>
      <empty-placeholder v-else :empty-img="emptyImg" image-size="90px" style="margin-bottom: 24px" />
    </div>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-show="incomeData.items.length > 0"
        :current-page="page"
        :page-size="perPage"
        :total="incomeData.items.length"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import { moneyFilter } from '@/filters/number';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { format } from '@/filters/date';
import setting from '@/assets/setting.png';
// import ElMessage from '@/utils/message';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
// addSharingPrice
import { getIncomeCostList } from '@/api/mengliOrder';
import { mapState } from 'vuex';
// img
import transactionNumber from '@/assets/chargeOffDetail/transactionNumber.png';
import incomeIcon from '@/assets/mengli/mengliorder/income.png';
import accountingAmount from '@/assets/mengli/mengliorder/accountingAmount.png';
import times from '@/assets/mengli/mengliorder/img.png';
import emptyImg from '@/assets/empty-data-icon.png';

export default {
  components: { SectionTitle, EmptyPlaceholder, dataDisplay, btnGroup },
  filters: {
    moneyFilter, format
  },
  props: {
    orderId: {
      type: String | Number,
      default: ''
    },
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      emptyImg,
      setting,
      incomeIcon,
      transactionNumber,
      times,
      accountingAmount,
      opeatorloading: false,
      loading: false,
      page: 1,
      perPage: 10,
      isEdit: false,
      editPrice: '',
      editSupplierPrice: '',
      editid: '',
      incomeData: {
        items: []
      },
      paramsObj: {
        month: '',
        totalSharingPrice: '',
        isSelfCreate: 1
      },
      isAddPhase: false,
      tableHeight: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    dataList() {
      const incomeData = this.incomeData;
      return [
        { data: this.handelData(incomeData.sharingPriceTotal), label: '分期总额', icon: transactionNumber },
        { data: this.handelData(incomeData.notTaxAmount), label: '不含税总额', icon: incomeIcon },
        { data: this.handelData(incomeData.taxNum), label: '总税额', icon: times },
        { data: this.handelData(incomeData.authorSharingPrice), label: '作者分成', icon: accountingAmount }
      ];
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(reset = false) {
      if (reset) this.page = 1;
      this.loading = true;
      const params = {
        id: this.orderId,
        page: this.page,
        perPage: this.perPage
      };
      getIncomeCostList(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.incomeData = res.data;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    // 翻页
    handleData(tableData) {
      return tableData.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      const arr = ['收入项', '收入细项', '含税金额', '不含税收入', '税率', '税额', '作者分成（IP授权、衍生品收入）', '分成比例'];
      return arr.includes(column.label) ? 'not-padding' : '';
    },
    handelData(data) {
      if (!data && data !== 0) return '--';
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
.supplier-item {
  display: inline-flex;
  padding: 10px 5px;
  justify-content: space-between;
}
.top-container {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ip-order-income {
  &::v-deep {
    .el-dialog {
      .el-dialog__body {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
  }
  .title-btn-right {
    position: absolute;
    right: 0;
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mobile-dialog-main {
  .width240 {
    width: 200px;
    &::v-deep {
      .el-input__inner {
        width: 200px;
      }
    }
  }
}
.title-info {
  display: flex;
  flex:1;
  flex-wrap: wrap;
  align-items: center;
  padding: 9px 12px;
  background: #FAFAFC;
  height: 64px;
  .title-info-item {
    display: flex;
    align-items: center;
    width: 23%;
    height: 50%;
    margin-right: 10px;
    min-width: 180px;
    text-align: left;
    &:not(:nth-of-type(4n)) {
      border-right: 1px solid #DDE1EA;
    }
    .icon {
      width: 16px;
      margin-right: 5px;
    }
    .title {
      font-size: 14px;
      color: #999999;
      margin-right: 16px;
    }
    .content {
      font-size: 14px;
      color: #5F77C3;
      font-weight: bold;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
.plr10 {
  padding-left: 10px;
  padding-right: 10px;
}
.opeator {
  color: #406eff;
  cursor: pointer;
  margin-left: 10px;
}
.btn-container {
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.one-cell {
  display: flex;
  align-items: center;
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-list {
  .column-item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    .content {
      display: inline-block;
    }
    &.border {
      border-bottom: 1px solid #EBEEF5;
    }
  }
}

.income-table {
  &::v-deep {
    .not-padding {
      .cell {
        padding: 0;
      }
    }
  }
}
.ipName {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 10px;
  font-weight: 550;
}
.ip-order-income-scroll-container {
  @include scrollBar($x: hidden, $y: auto);
  &::v-deep {
    .el-form-item__label {
      color: #666 !important;
    }
  }
}
</style>
